<template>
  <div class="cover-title-wrapper">
    <div class="cover-title-left-wrapper">
      <img class="cover-img" :src="cover">
    </div>
    <div class="cover-title-right-wrapper">
      <div class="detail-cover-title-wrapper">
        <div class="cover-title-text">{{title}}</div>
      </div>
      <div class="cover-author-wrapper">
        <div class="cover-author-text">{{author}}</div>
      </div>
      <div class="detail-cover-description-wrapper">
        <div class="detail-cover-description-text">{{desc}}</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'BookInfo',
  props: {
    cover: String,
    title: String,
    author: String,
    desc: String
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../assets/styles/global"
  .cover-title-wrapper
    display: flex
    width: 100%
    padding: px2rem(10) 0
    border-bottom: px2rem(1) solid #eee
    box-sizing: border-box
    .cover-title-left-wrapper
      flex: 0 0 px2rem(103)
      padding: px2rem(10) 0 px2rem(10) px2rem(15)
      box-sizing: border-box
      topStyle()
      .cover-img
        width: px2rem(103)
        height: px2rem(146)
    .cover-title-right-wrapper
      flex: 1
      padding: px2rem(10) px2rem(15)
      box-sizing: border-box
      .detail-cover-title-wrapper
        .cover-title-text
          font-size: px2rem(24)
          line-height: px2rem(26)
          font-weight: bold
          color: #333
      .cover-author-wrapper
        margin-top: px2rem(10)
        .cover-author-text
          font-size: px2rem(14)
          line-height: px2rem(16)
          color: $color-blue
      .detail-cover-description-wrapper
        margin-top: px2rem(10)
        .detail-cover-description-text
          font-size: px2rem(14)
          line-height: px2rem(16)
          color: #666
          word-break: keep-all
          white-space: normal
          overflow: hidden
          text-overflow: ellipsis
          overflow-wrap: break-word
</style>
